<template>
  <div>
    <el-dialog
      title="日历"
      :visible.sync="visible"
      append-to-body
      width="70%"
      custom-class="import-dialog"
    >
      <div
        id="calendar-page"
        style="
          overflow: auto;
          height: 100%;
          padding-bottom: 0.4rem;
          padding-top: 0.5rem;
        "
        v-if="isShow"
      >
        <div class="flexddd" style="height: 100%">
          <div v-if="isShow">
            <calendar
              ref="calendar1"
              :events="events"
              :yangevents="yang_events"
              :lunar="lunar"
              :value="value"
              @select="select"
              @selectMonth="selectMonth"
              @selectYear="selectYear"
            >
            </calendar>
            <button @click="$refs.calendar1.setToday()">返回今天</button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import calendar from "./calendar.vue";
import foli from "./yinli_festival.json"; // 获取节日表
import yangli from "./yangli_festival.json"; // 获取节日表
export default {
  props: {
    show: {
      type: Boolean,
    },
  },
  components: {
    calendar,
  },
  data() {
    return {
      value: [
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        new Date().getDate(),
      ], // 默认日期
      lunar: true, // 显示农历
      events: {},
      yang_events: yangli,
      month: new Date().getMonth() + 1,
      timeYear: new Date().getFullYear(),
      isShow: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val); // visible 改变的时候通知父组件
      },
    },
  },
  watch: {
    timeYear(curVal, oldVal) {
      this.value = [this.timeYear, this.month, 15];
      this.isShow = false;
      this.events = {};
      this.transTime();
    },
  },
  created() {
    this.transTime();
  },
  mounted() {
    // 默认选中
    setTimeout(() => {
      this.$refs.calendar1.setToday();
    }, 500);
  },
  methods: {
    // 日历事件
    select(val) {
    },
    selectMonth(month, year) {
      this.timeYear = year;
      this.month = month;
    },
    selectYear(year) {
      this.timeYear = year;
    },
    transTime() {
      setTimeout(() => {
        this.isShow = true;
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>